<template>
  <!--
      	作者：luoyiming
      	时间：2020-06-25
      	描述：插件中心-限时活动列表-编辑活动-其它
      -->
  <div>
    <div class="common-form">其它</div>


    <el-form-item label="页面上部活动图片：">
        <el-row>
          <el-button icon="el-icon-picture-outline" @click="openProductUpload('image','page_image')">选择图片</el-button>
          <div v-if="form.imgUrl>0" class="img mt10">
            <img :src="form.imgUrl_path" width="100" height="100"/>
          </div>
        </el-row>
    </el-form-item>

    <el-form-item label="分享图片：">
        <el-row>
          <el-button icon="el-icon-picture-outline" @click="openProductUpload('image','share_img')">选择图片</el-button>
          <div v-if="form.share_img>0" class="img mt10">
            <img :src="form.share_img_url" width="100" height="100"/>
          </div>
        </el-row>
    </el-form-item>

    <el-form-item label="页面背景颜色" :rules="[{ required: true, message: '请输入页面背景颜色' }]" >
      <div class="max-w460">
        <!-- <el-input v-model="form.bgColor" type="text"></el-input> -->
        <el-color-picker v-model="form.bgColor" @change="change"></el-color-picker>
      </div>
    </el-form-item>

    <el-form-item label="分享标题" :rules="[{ required: true, message: '请输入分享标题' }]" >
      <div class="max-w460">
        <el-input v-model="form.share_title" type="text"></el-input>
      </div>
    </el-form-item>


    <el-form-item label="头部名称" :rules="[{ required: true, message: '请输入头部名称' }]" >
      <div class="max-w460">
        <el-input v-model="form.navbar_title" type="text"></el-input>
      </div>
    </el-form-item>
    
    <el-form-item label="头部背景色" :rules="[{ required: true, message: '请输入头部背景色' }]">
      <div class="max-w460">
        <!-- <el-input v-model="form.navbar_bgcolor" type="text"></el-input> -->
        <el-color-picker v-model="form.navbar_bgcolor" @change="change2"></el-color-picker>
      </div>
    </el-form-item>
    
    <el-form-item label="左边背景色">
      <div class="max-w460">
        <el-color-picker v-model="form.left_color" @change="changeLeft"></el-color-picker>
      </div>
    </el-form-item>

    <el-form-item label="右边背景色">
      <div class="max-w460">
        <el-color-picker v-model="form.right_color" @change="changeRight"></el-color-picker>
      </div>
    </el-form-item>

    <el-form-item label="活动排序" :rules="[{ required: true, message: '请输入活动排序' }]">
      <div class="max-w460">
        <el-input v-model="form.sort" type="number"></el-input>
      </div>
    </el-form-item>
    <el-form-item label="是否可用优惠券">
      <el-radio-group v-model="form.is_coupon">
        <el-radio :label="0">不可用</el-radio>
        <el-radio :label="1">可用</el-radio>
      </el-radio-group>
      <!-- <el-switch v-model="form.is_coupon"></el-switch> -->
    </el-form-item>
    <el-form-item label="是否生效">
      <el-radio-group v-model="form.status">
        <el-radio :label="0">未生效</el-radio>
        <el-radio :label="1">生效</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="是否指定新用户">
      <el-radio-group v-model="form.is_new">
        <el-radio :label="0">否</el-radio>
        <el-radio :label="1">是</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="设定库存（0不限制）" >
      <div class="max-w460">
        <el-input v-model="form.stock" type="number"></el-input>
      </div>
    </el-form-item>

    <el-form-item label="剩余库存" >
      <div class="max-w460">
        <el-input v-model="form.balance_stock" type="number"></el-input>
      </div>
    </el-form-item>

     <!--图片组件-->
     <Upload v-if="isProductUpload" :config="config" :isupload="isProductUpload" @returnImgs="returnProductImgsFunc">
      上传图片
    </Upload>
  </div>
</template>

<script>
import Upload from '@/components/file/Upload';
export default {
  props: ['form'],
  components: {
    Upload
  },
  data() {
    return {
      /*form表单数据*/
      isProductUpload:false,
     
    }
  },

methods: {

  change(e){
    this.form.bgColor = e;
  },

  change2(e){
    this.form.navbar_bgcolor = e;
  },
 
  changeLeft(e){
    this.form.left_color = e;
  },
  

  changeRight(e){
    this.form.right_color = e;
  },


/*打开上传图片*/
openProductUpload: function (file_type, file_name) {
  console.log('类型',file_type)
  this.file_name = file_name;
  if (file_type == 'image') {
    this.config = {
      total: 1,
      file_type: 'image'
    };
  } 
  this.isProductUpload = true;
},

/*上传商品图片*/
returnProductImgsFunc(e) {
  if (e != null) {
    if (this.file_name == 'share_img') {
      this.form.share_img = e[0].file_id;
      this.form.share_img_url = e[0].file_path;
    }else if(this.file_name == 'page_image'){
      this.form.imgUrl = e[0].file_id;
      this.form.imgUrl_path = e[0].file_path;
    }

  }
  this.isProductUpload = false;
  },
}
};
</script>

<style></style>
